<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>

<div>
    <div class="layui-form layui-form-pane" style="margin: 5px">
        <button class="layui-btn" id="add" lay-even="add">添加</button>

        <div class="layui-inline" style="float: right;visibility: hidden">
            <div class="layui-input-inline">
                <div class="layui-input-block">
                    <input type="text" name="groupName" id="groupName" required  lay-verify="required" placeholder="Please enter the role name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>

    <table id="demo" lay-filter="test"></table>
</div>

<%--templet对应的模板--%>
<script type="text/html" id="increase">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="barDemo">
    <c:if test="${model.glDelete != 1} && ${model.glUpdate !=1}">
        Without the permission
    </c:if>
    <c:if test="${model.glUpdate == 1}">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </c:if>
    <c:if test="${model.glDelete == 1}">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </c:if>
</script>


<script>
    layui.use(['util','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form','jquery'], function(){
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,//加载jquery对象
            layer = layui.layer;

        //让层自适应iframe
        $('#add').on('click', function(){
            var index = layer.open({
                title: '信息',
                type: 2,
                content: '/manage/group/goAdd',
                area: ['800px', '450px'],
                maxmin: true,
                end: function () {
                    location.reload();
                }
            });
            parent.layer.iframeAuto(index);
        });


        //第一个实例
        table.render({
            elem: '#demo'
            ,url: '/manage/group/findAllJson' //数据接口
            ,page: true //开启分页
            ,limit:10 //初始页条数
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:180, templet: '#increase'}
                ,{field: 'groupName', title: '角色名称', width:180}
                ,{fixed: 'right',title: '操作栏',  align:'left', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,id:'testReload' //重载标识
        });

        // 方法级渲染的重载 不需要 #
        var $ = layui.$, active = {
            reload: function(){
                //获取条件
                var groupName = $('#groupName').val();

                //执行重载 testReload 对应第一个实例中 id
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        groupName:groupName
                    }
                });
            }
        };
        $('#searchBtn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'look'){ //查看
                //do somehing
                layer.msg('的确很重要', {icon: 1,time:500});
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除吗?', function(index){
                    $.ajax({
                        url : '/manage/group/del',
                        type : 'post',
                        dataType : 'json',
                        data : {id : data.groupId},
                        success : function (data) {
                            if (data.code=="200"){
                                layer.msg(data.msg,{icon: 1, time: 500},function () {
                                    window.location.reload();
                                });
                            }else{
                                layer.msg(data.msg,{icon: 1, time: 1000});
                            }
                        }
                    })

                });
            } else if(layEvent === 'edit'){ //编辑
                var index = layer.open({
                    title: '信息',
                    type: 2,
                    content: '/manage/group/goEdit?id='+data.groupId,
                    area: ['800px', '450px'],
                    maxmin: true,
                    end: function () {
                        location.reload();
                    }
                });
                parent.layer.iframeAuto(index);
            }else if(layEvent === 'giveLimit'){
                var index = layer.open({
                    title: '信息',
                    type: 2,
                    content: '/manage/group/goGiveLimit?id='+data.groupId,
                    area: ['400px', '450px'],
                    maxmin: true,
                    end: function () {
                        location.reload();
                    }
                });
                parent.layer.iframeAuto(index);
            }
        });

    });
</script>
</body>
</html>
